<template>
  <MainSlot>
    <template v-slot:tab>
      <EnumSlot @handleEvent="getEnumEvent" :selectIndex="selectIndexEnum" :enumList="enumList"></EnumSlot>
    </template>
    <template v-slot:searchForm>
      <!-- <selectbutton
        :buttonselectlist="buttonselectlist"
        @nowselectbuttonindex="nowselectbuttonindex"
      /> -->
      <div class="lfetBlockBox">
        <div class="lfetBlock">
          <img class="img" src="@/assets/energy-manage/energy.png" alt />
          <div class="blockData">
            <div>当前时间段累计能耗量: {{ blockData }}{{ unitName }}</div>
          </div>
        </div>
        <div style="display: flex; height: 8%;align-items: center;">
          <div class="three1">
            <div class="threeTime" :class="timeType === '年'? 'threeTimeDiff':''" @click="getTimeType('年')">年</div>
            <div class="threeTime" :class="timeType === '月'? 'threeTimeDiff':''" @click="getTimeType('月')">月</div>
            <div class="threeTime" :class="timeType === '日'? 'threeTimeDiff':''" @click="getTimeType('日')">日</div>
            <div>
              <el-date-picker v-model="dateArr" :default-time="['00:00:00','23:59:59']" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :clearable="false" @change="getBiaoData" />
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-slot:table>
      <div style="display: flex; height: 100%;">
        <div class="leftBlock">
          <div class="two">选择设备</div>
          <div class="one">
            <div v-for="item,index in equipList" :key="index" class="item" :class="selectIndex === index? 'selectedItem':''" @click="selectEquip(item.dataItemId,index)">{{ item.equipmentName }}</div>
          </div>
        </div>
        <div style="width:84%;">
          <el-table ref="tableData" v-loading="loading" highlight-current-row :data="tableData" stripe border height="92%">
            <!-- <el-table-column type="selection" width="60" /> -->
            <el-table-column type="index" label="序号" width="60" />
            <el-table-column v-for="item,index in formDataLists" :key="index" :prop="item.porp" :label="item.name" :min-width="130">
              <template v-if="!item.notSearch" #header>
                <TypePopover v-if="tableUpStauts === 1" :column-index="index" :column="item" :filter-options="item.typeObj.list" :filter-name="item.typeObj.listName" :table-up-stauts="tableUpStauts" @tableUpdate="tableUpdate($event, item.name)" />
              </template>
              <template v-if="scope.row.dataCollectId" slot-scope="scope">
                <span v-if="item.porp === 'value'">{{ scope.row[item.porp] }}{{ unitName }}</span>
                <span v-else>{{ scope.row[item.porp] }}</span>
              </template>
            </el-table-column>
          </el-table>
          <Pagination :page-size="pageSize" :current-page="currentPage" :total-size="totalSize" @changePageSize="changePageSize" @changeCurrentPage="changeCurrentPage" />
        </div>
      </div>
    </template>
  </MainSlot>
</template>
<script>
// import MainSlot from "@/components_yy/MainSlot/newMainSlot.vue";
import MainSlot from "@/components/MainSlot";
import EnumSlot from "@/components/EnumSlot";
import Pagination from "@/components_yy/Pagination";
import TypePopover from "@/components_yy/ZnFilterTable/typePopover.vue";
import { mymixin } from "@/utils/mixins";
import ActionBar from "@/components_yy/ActionBar";
import selectbutton from "@/components_yy/selectbutton/index.vue";
import deviceApi from "@/api/livestock-manage/energy-management/deviceApi";
import Api from "@/api/livestock-manage/energy-management/statisticalDataApi";
// import dataItemApi from "@/api/basic-info-manage/data-item-management";
export default {
  name: "BreedRecord",
  components: {
    MainSlot,
    Pagination,
    TypePopover,
    selectbutton,
    ActionBar,
    EnumSlot,
  },
  mixins: [mymixin],
  data() {
    return {
      equipList: [],
      dianList: [],
      shuiList: [],
      selectIndexEnum:0,
      unitName: "kw",
      type: "电表",
      deviceName: "",
      dateArr: [],
      searchFormData:{},
      loading: false,
      dataItemId: "",
      timeType: "月",
      blockData: "",
      buttonselectlist: [
        { name: "电", value: "电表" },
        { name: "水", value: "水表" },
      ],
      enumList: [
        {
          label: "电表",
          value: true,
        },
        {
          label: "水表",
          value: true,
        },
      ],
      selectIndex: 0,
      formDataLists: [
        {
          type: "input", // input Select Checkbox TimePicker
          porp: "collectDatetime",
          typeObj: {},
          name: "日期时间",
          notSearch: true,
        },
        {
          type: "input", // input Select Checkbox TimePicker
          porp: "value",
          typeObj: {},
          name: "能源数据",
          notSearch: true,
        },
      ],
    };
  },
  created() {
    this.getEquip();
  },
  mounted() {},
  methods: {
    //获取选中Enum
    getEnumEvent(info) {
      this.selectIndexEnum = info.index || 0;
      console.log(info);
      this.type = info.data.label;
      if (this.type === "电表") {
        this.unitName = "kw";
        this.equipList = this.dianList;
      } else {
        this.unitName = "m³";
        this.equipList = this.shuiList;
      }
      this.selectEquip(this.equipList[0]?.dataItemId, 0);
    },

    getBiaoData(arr) {
      if (arr === null) {
        this.getTimeType(this.timeType);
        return;
      }
      this.search();
    },

    nowselectbuttonindex(e) {
      this.type = e.value;
      if (this.type === "电表") {
        this.unitName = "kw";
        this.equipList = this.dianList;
      } else {
        this.unitName = "m³";
        this.equipList = this.shuiList;
      }
      this.selectEquip(this.equipList[0]?.dataItemId, 0);
    },

    selectEquip(dataItemId, index) {
      this.selectIndex = index;
      this.dataItemId = dataItemId;
      this.getTimeType("月");
    },
    // 获取设备
    getEquip() {
      deviceApi.conditionQuery({ type: "电表" }).then((res) => {
        this.dianList = res.data || [];
        this.nowselectbuttonindex({ name: "电", value: "电表" });
      });
      deviceApi.conditionQuery({ type: "水表" }).then((res) => {
        this.shuiList = res.data || [];
      });
    },
    getTimeType(e) {
      this.timeType = e;
      this.dateArr = [];
      let startTime = "";
      let endTime = this.dateToFormat(new Date());
      let currentYear = new Date().getFullYear();
      if (e === "年") {
        startTime = currentYear + "-01-01 00:00:00";
      }
      if (e === "月") {
        const m = (new Date().getMonth() + 1 + "").padStart(2, "0");
        startTime = `${currentYear}-${m}-01 00:00:00`;
      }
      if (e === "日") {
        const m = (new Date().getMonth() + 1 + "").padStart(2, "0");
        const d = (new Date().getDate() + "").padStart(2, "0");
        startTime = `${currentYear}-${m}-${d} 00:00:00`;
      }
      this.dateArr.push(startTime);
      this.dateArr.push(endTime);
      this.search();
    },
    // 导出
    ExpensesDownExcel() {},
    // 获取表单数据
    getTableDataList() {
      this.loading = true;
      let params = {
        sortStr: "collectDatetime",
        page: this.currentPage,
        size: this.pageSize,
        entity: {
          type: this.type,
          dataItemId: this.dataItemId || undefined,
          startTime:
            (this.dateArr[0] && this.dateToFormat(this.dateArr[0])) ||
            undefined,
          endTime:
            (this.dateArr[1] && this.dateToFormat(this.dateArr[1])) ||
            undefined,
        },
      };
      deviceApi.historyDate(params).then((res) => {
        this.loading = false;
        if (res.code === 1) {
          this.tableData = JSON.parse(
            JSON.stringify(res.data.content)
          );
          this.totalSize = res.data.totalElements;
          this.addblankmet();
          this.resetActionBar();
        }
      });
      Api.queryByCount(params.entity).then((res) => {
        this.blockData = res.data || 0;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.action-bar {
  background-color: #fff;
  border: unset;
  box-shadow: 0 0 3px 1px rgba(45, 45, 45, 0.2);
}
::v-deep .el-input__inner {
  border-color: #3591eb;
  color: #3591eb;
  border-radius: 4px;
}
::v-deep .el-range-separator {
  color: #3591eb;
}
::v-deep .el-range__icon {
  color: #3591eb;
}
::v-deep .el-date-editor .el-range-input {
  color: #3591eb !important;
}
.lfetBlockBox {
  display: flex;
  align-items: center;
}
.lfetBlock {
  position: relative;
  .blockData {
    font-size: 20px;
    position: absolute;
    top: 14px;
    left: 50px;
  }
}
.leftBlock {
  width: 16%;
  height: 100%;
  color: #000;
  padding: 20px;
  .two {
    text-align: center;
    height: 5%;
    font-size: 16px;
    font-weight: 600;
  }
  .one {
    width: 100%;
    height: 95%;
    overflow: auto;
    .item {
      width: 100%;
      border: #d1d0d0 1px solid;
      border-bottom: unset;
      font-size: 14px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      cursor: pointer;
      &:hover {
        background-color: #3591eb;
        color: #ffffff;
      }
    }
    :last-child {
      border-bottom: #d1d0d0 1px solid;
    }
    .selectedItem {
      background-color: #3591eb;
      color: #ffffff;
    }
  }
}
.three1 {
  display: flex;
  font-size: 16px;
  height: 12%;
  align-items: center;
  margin-left: 30px;
  .threeTime {
    width: 80px;
    border: #3591eb 1px solid;
    text-align: center;
    height: 36px;
    line-height: 34px;
    border-radius: 4px;
    margin-right: 5px;
    color: #3591eb;
    cursor: pointer;
  }
  .threeTimeDiff {
    background-color: #3591eb;
    color: #ffffff;
  }
}
.img {
  width: 400px;
  height: 40px;
  margin-top: 6px;
  margin-left: 2%;
}
 ::v-deep .el-date-editor {
    height: 36px;
}
::v-deep .el-range-input{
  font-size: 14px;
}
::v-deep .el-range-separator{
  line-height: 30px;
}


</style>
